<template>
  <view class="wrok-card">
    <view class="wrok-card-title flex justify-between px-[30rpx]">
      <text class="title">我的作品</text>
      <view class="operat-box flex items-center mt-[21rpx]">
        <view class="add-btn w-[78rpx] h-[48rpx] mr-[14rpx]" @click="goFans">
          <image
            mode="aspectFill"
            class="w-[100%] h-[100%]"
            src="/static/images/add-btn.png"
          />
        </view>
        <view
          v-if="userInfo?.role === 2 || userInfo?.role === 3"
          class="work-btn w-[134rpx] h-[48rpx]"
          @click="$emit('show-list', true)"
        >
          <image
            class="w-[100%] h-[100%]"
            mode="aspectFill"
            src="/static/images/work-btn.png"
          />
        </view>
      </view>
    </view>
    <!-- 图文 -->
    <image-text-work />
  </view>
</template>
<script lang="ts" setup>
import ImageTextWork from "./image-text-work.vue";
// import VideoWork from './video-work.vue'
// import ImageWork from './image-work.vue'
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
defineEmits(["show-list"]); // 声明触发事件
const goFans = () => {
  uni.navigateTo({
    url: "/pages-sub/publishComposition/index",
  });
};
</script>
<style lang="scss" scoped>
.wrok-card {
  padding: 30rpx 0;
  background: rgba(255, 255, 255, 1);
  border-radius: 36rpx;
  box-shadow: 0px 2px 32px rgba(94, 125, 50, 0.1);
  .wrok-card-title {
    .title {
      font-size: 36rpx;
      font-weight: 600;
      line-height: 47.74rpx;
      color: rgba(27, 27, 27, 1);
    }
    .operat-box {
      .add-btn {
        width: 78rpx;
        height: 48rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .work-btn {
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
